import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' // 引入vuex-persistedstate插件包
// vuex-persistedstate这个插件会帮你将vuex中的token数据存入到localStorage中
import { getUserInfoAPI } from '@/api'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '', // 保存token字符串，这个token是密钥(Ajax中的知识)，它是进入项目中页面需要的一个身份象征，登录成功后，后台会返回这个token，它就是用户的身份象征，凭借这个用户就能进入指定网页
    userInfo: {} // 用于保存用户信息(id、username、nickname、email、user_pic)
  },
  getters: {
    // username: state => state.userInfo.username   // 这是简写形式
    username (state) { // 用户名
      return state.userInfo.username
    },
    nickname (state) { // 用户昵称
      return state.userInfo.nickname
    },
    user_pic (state) { // 用户头像
      return state.userInfo.user_pic
    }
  },
  mutations: { // mutations可以给state中的数据赋值
    // 保存token
    updateToken (state, val) {
      state.token = val
    },
    updateUserInfo (state, val) {
      state.userInfo = val
    }
  },
  actions: {
    async getUserInfoActions (store) { // 这里不知道为什么是store，但换成context也行，actions中的方法可以通过context和commit调用mutations中的方法
      const res = await getUserInfoAPI() // getUserInfoAPI()是api中定义的接口方法，这里调用就会返回用户信息，此时res中装的就是用户的信息
      // console.log(res)
      store.commit('updateUserInfo', res.data.data) // 调用mutations中的updateUserInfo方法，将接口返回的用户信息res.data.data作为参数传递进去，实现将用户信息存入到vuex中
    }
  },
  modules: {
  },
  // 配置为 vuex 的插件
  plugins: [
    createPersistedState() // 引用注入vuex-persistedstate持久化插件
  ]
})

// vuex默认保存在内存中，所以刷新后所有的值都会回归初始化(无法做到持久存储)，这个时候可以配合localStorage使用，但是数据量过大时localStorage也会有问题，这种时候就可以用到vuex的插件vuex-persistedstate@3.2.1
// vuex-persistedstate@3.2.1(这个包这个版本配合vue2使用, 默认最新版是配合vue3使用)可以让vuex做到持久化存储
